<template>
	<view class='container'>
		<form @submit="onSubmit" report-submit='true'>
			<view class='mobile-class-box'>

				<view class="weui-cell">
					<view class="weui-cell__hd font-17">
						手机号码
					</view>
					<view class="weui-cell__bd">
						<input type='text' placeholder='输入手机号码' value="" bindinput="bindCode" name="mobile" maxlength='20' style='width:100%;text-align: left;'
						 class='mgl-15'></input>
					</view>
				</view>
				<view class="weui-cell">
					<view class="weui-cell__hd font-17">
						验证码
					</view>
					<view class="weui-cell__bd">
						<input type='text' placeholder='输入验证码' value="" name="captcha" maxlength='10' style='width:100%;text-align: left;'
						 class='mgl-30'></input>
					</view>
					<button class="get-mobile font-12" @tap='getCode' :hidden="hidden" :disabled="btnDisabled">
						{{btnValue}}
					</button>
				</view>

			</view>


			<view class='class-btn-bot'>
				<button id='1' class='submit-btn  bg-blue font-18' hover-class formType="submit">登录</button>
			</view>
		</form>
	</view>
</template>

<script>
	import app from '../../../App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '../../../utils/gyzjModel.js';
	export default {
		data() {
			return {
				/*控制验证码显示 */
				hidden: false,
				btnDisabled: false,
				btnValue: '获取',
				second: 10,
				mobile: '',
			}
		},
		methods:{
			
			 //获取短信验证码
			  getCode:function(e) {
			    console.log('获取验证码');
			    console.log(e.detail.value);
			    console.log(this.code);
			    var that = this;
			    this.sendCode();
			    that.timer();
			  },
			sendCode:function(){
			    let postData={
			      mobile: this.mobile
			    };
			    gyzjModel.prototype.sendCode(postData).then(data => {
			      switch (data.code) {
			        case 1:
			          uni.hideLoading();
			          break;
			        default:
			          reject(data);
			          uni.showModal({
			            content: data.message,
			            showCancel: false,
			            confirmColor: '#f94c48',
			          })
			          break;
			      }
			      uni.hideLoading();
			    })
			  },
			timer:function(){
				let promise=new Promise((resolve,reject)=>{
					let setTimer=setInterval(()=>{
						var second=this.second-1;
						this.second=second;
						this.btnValue=second+'秒';
						this.btnDisabled=true;
					})
					if(this.second<=0){
						this.second=10;
						this.btnValue='获取验证码';
						this.btnDisabled=false;
					}
					resolve(setTimer);
				})
				promise.then((setTimer)=>{
					clearInterval(setTimer);
				})
			},
			onSubmit: function(e) {
				console.log('e的submit',e);
				let postData = e.detail.value;
				if (postData['mobile'] == '') {
					uni.showModal({
						content: `手机号码不能为空`,
						confirmColor: '#f94c48',
						showCancel: false,
						success: (res) => {}
					})
					return
				}
				if (postData['captcha'] == '') {
					uni.showModal({
						content: `验证码不能为空`,
						confirmColor: '#f94c48',
						showCancel: false,
						success: (res) => {}
					})
					return
				}
				var arr=this.main_getGlobal();
				gyzjModel.prototype.updataUserInfo(postData,arr['token'],arr['type']).then(data => {
				  uni.showLoading();
				  switch (data.code) {
				    case 1:
				      uni.hideLoading();
				      uni.navigateTo({ //获取到手机号码之后跳转入驻页
				        url: '../../user-center/user-center',
				      })
				      break;
				    default:
				      reject(data);
				      uni.showModal({
				        content: data.message,
				        showCancel: false,
				        confirmColor: '#f94c48',
				      })
				      break;
				  }
				  uni.hideLoading();
				})
			},
		}
	}
</script>

<style>
	/* pages/start-class/replace-mobile/replace-mobile.wxss */
	@import url("../../../static/style/app.css");

	.mobile-class-box {
		height: auto;
		background-color: white;
	}

	.container {
		height: 100%;
	}

	page {
		background-color: #F0F2F5;
	}

	.class-btn-bot {
		margin-top: 300upx;
	}

	.get-mobile {
		width: 130upx;
		height: 54upx;
		line-height: 54upx;
		border: 1px solid #2190FF;
		color: #2190FF;
		text-align: center;
		border-radius: 8upx;
		background: #fff;
	}

	.weui-cell:before {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #e5e5e5;
		color: #e5e5e5;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		z-index: 2;
	}
</style>
